//import...from...语法，从xxx导入xxx，从vue框架导入createApp()函数功能
import { createApp } from 'vue'

//从element-plus框架导入名叫ElementPlus的组件
import ElementPlus from 'element-plus'

//导入css样式
import 'element-plus/dist/index.css'

//从element-plus/icons-vue导入所有图标组件
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

//从zh-cn.mjs导入zhCn组件
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

//从router.js导入路由组件
import router from '@/router/router'

//从App.vue页面/组件导入名叫App的组件 (这个组件是整个vue项目的根组件)
import App from './App.vue'
import {jwtName} from "@/util/util";

//解决缩小或放大页面时，页面报错---start
const debounce = (fn, delay) => {
    let timer = null;
    return function () {
        let context = this;
        let args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(context, args);
        }, delay);
    }
}
const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver{
    constructor(callback) {
        callback = debounce(callback, 16);
        super(callback);
    }
}
//解决缩小或放大页面时，页面报错---end


//使用上面导入的createApp()函数，创建Vue应用，创建Vue应用时使用了App这个组件
let app = createApp(App);

//使用ElementPlus组件，并使用中文环境的ElementPlus
app.use(ElementPlus, {locale: zhCn});

//注册ElementPlus的所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

//使用router组件
app.use(router);

//el：指令绑定到的元素。这可以用于直接操作DOM。
//binding：一个对象，包含以下属性：
//  value：传递给指令的值  （clue:delete）
//给vue应用创建一个自定义的指令（v-if、v-for、v-html, v-text）
app.directive('hasAuth', (el, binding) => {
    // 这会在 `mounted` 和 `updated` 时都调用
    console.log(binding.value)
    //判断当前登录的用户是否有该权限标识符，有就显示按钮，否则不显示

    let loginData = window.sessionStorage.getItem(jwtName());
    if (!loginData) {
        loginData = window.localStorage.getItem(jwtName());
    }

    let flag = false;
    //从两处都拿了一下，如果拿到jwt，就把jwt放入请求头中
    if (loginData) {//表示存在，有值，不是空
        let login = JSON.parse(loginData); //把字符串的json解析成对象
        //for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值
        for (let index in login.authList) {
            if (binding.value === login.authList[index]) {
                flag = true;
                break;
            }
        }
        //下面这种方式也可以，这种方式是循环数组元素
        /*for (let authCode of login.authList) {
            if (binding.value === authCode) {
                flag = true;
                break;
            }
        }*/
    }
    if (!flag) { //没有权限
        //el.style.display = 'none'; //通过css样式隐藏el节点
        el.parentNode && el.parentNode.removeChild(el); //把el节点删除
    }
})

//把vue应用挂载到根容器下，根容器是public下index.html页面里面的一个id=“app”的页面元素
app.mount('#app');
